<template>
  <div v-loading="loading">
    <div class="row justify-between">
      <div class="col">
        <el-icon style="cursor: pointer;vertical-align: middle;margin: -2px 3px auto;" @click="closeDetailBox">
          <ArrowLeft />
        </el-icon>
        <span style="color:#666; font-weight:bold;">数据读取</span>
        <span style="margin:0 3px 0 6px;">/</span>
       <span v-if="tabsData.results.length>0"> {{ tabsData.results[detailIndex].label }}</span>
      </div>
      <div class="col" style="text-align:right;">
        <el-button @click="getDetails()">刷新</el-button>
        <el-button type="danger" plain @click="deleteData()">删除</el-button>
        <el-button type="primary" @click="detailUpdata()">更新算子</el-button>
      </div>
    </div>
    <div class="row detailBox">
      <div class="titleBox">
        <el-tabs tab-position="left" class="demo-tabs" @tab-click="versionData">
          <el-tab-pane v-for="(item, index) in tabsData.results" :key="index" :label="item.version" />
        </el-tabs>
      </div>

      <div class="dataBox" v-if="tabsData.results.length>0">
        <tr>
          <td>模板名称：<span>{{ tabsData.results[detailIndex].label }}</span> </td>
        </tr>
        <tr>
          <td>描述：<span>{{ tabsData.results[detailIndex].description }}</span></td>
        </tr>
        <tr>
          <td>创建时间：<span>{{ tabsData.results[detailIndex].create_time }}</span></td>
        </tr>
        <tr>
          <td>更新时间：<span>{{ tabsData.results[detailIndex].update_time }}</span></td>
        </tr>
        <tr>
          <td>版本：<span>{{ tabsData.results[detailIndex].version }}</span></td>
        </tr>
        <tr>
          <td>算子名称：<span>{{ tabsData.results[detailIndex].name }}</span></td>
        </tr>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, shallowRef,watch } from "vue";
import { getOperators,deleteOperators} from 'src/api/designerTool'
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
const router = useRouter()
const projectId = router.currentRoute.value.params.project_id
const loading = ref(false)
const props = defineProps({
  template_id: {
    type: Number
  },
  updatdOperator:{
    type:Boolean
  }
})
const operator_id = ref(0)
const tabsData = shallowRef({
  results:<any>[]
})
const detailIndex=ref(0)
// 监听更新算子
watch(()=>props.updatdOperator,(newdata,olddata)=>{
  getDetails()
})
// 获取详情数据
getDetails()
function getDetails() {
  loading.value = true
  getOperators(projectId, {template_id:props.template_id} ).then((res: any) => {
    tabsData.value=res.data
    operator_id.value=res.data.results[detailIndex.value].id
  }).catch(error => {
    console.log(error)
  }).finally(() => {
    loading.value = false
  })
}
function versionData(tab:any) {
  detailIndex.value=parseInt(tab.index)
}
const emits = defineEmits(['detailSet'])
// 关闭详情页
function closeDetailBox() {
  emits('detailSet', '关闭')
}
function detailUpdata(){
  emits('detailSet', '更新')
}
// 删除算子
function deleteData() {
  ElMessageBox.confirm('确定删除该算子版本数据吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    loading.value = true
    deleteOperators(projectId, operator_id.value).then(() => {
      ElMessage.success('删除成功！')
      detailIndex.value=0
      getDetails()
    }).finally(() => {
      loading.value = false
    })
  }).catch(() => {
    console.log('cancel delete')
  })
}

</script>

<style lang="scss" scoped>
.demo-tabs {
  height: calc(100vh - 230px);
}

.detailBox {
  margin-top:10px;
  .titleBox {
    width: 90px;
  }

  .dataBox {
    width: calc(100% - 92px) ;
    border:1px solid #e9e9e9;
    tr {
      width:100%;
      display:inline-block;
      td {
        width:100%;
        padding: 10px;
        border-bottom:1px solid #e9e9e9;
        display:inline-block;
      }
      span{
        color:#333;
      }

    }
  }
}
</style>
